<template>
  <div class="guide-main">
    <!-- 左侧内容 -->
    <div class="guide-left">
      <div class="hospital-header">
        <div class="hospital-logo">
          <i class="fas fa-hospital"></i>
        </div>
        <div>
          <h1 class="hospital-name">安心医疗</h1>
          <div class="hospital-tags">
            <span class="info-tag">综合医院</span>
            <span class="info-tag">医保定点</span>
            <span class="info-tag">无假日医院</span>
            <span class="info-tag">三级甲等</span>
          </div>
          <div class="hospital-contact">
            <span><i class="fas fa-map-marker-alt"></i> 北京市东城区帅府园1号</span>
            <span><i class="fas fa-phone-alt"></i> 010-69151188</span>
          </div>
        </div>
      </div>
      <div class="guide-tabs">
        <button class="tab-btn" :class="{ active: activeTab === 'guide' }" @click="activeTab = 'guide'">就诊流程</button>
        <button class="tab-btn" :class="{ active: activeTab === 'policy' }" @click="activeTab = 'policy'">医院政策</button>
        <button class="tab-btn" :class="{ active: activeTab === 'tips' }" @click="activeTab = 'tips'">重要提示</button>
        <button class="tab-btn" :class="{ active: activeTab === 'map' }" @click="activeTab = 'map'">医院位置与导航</button>
      </div>
      <div class="guide-tab-content">
        <div v-if="activeTab === 'guide'">
          <div class="guide-steps">
            <div v-for="step in hospital.guide" :key="step.step" class="step-card">
              <div class="step-header">
                <div class="step-number">{{ step.step }}</div>
                <div class="step-title">{{ step.title }}</div>
              </div>
              <div class="step-content">{{ step.content }}</div>
            </div>
          </div>
        </div>
        <div v-if="activeTab === 'policy'">
          <div class="policy-card">
            <h4 class="policy-title">医院就诊政策</h4>
            <ul class="policy-list">
              <li v-for="policy in hospital.policy" :key="policy" class="policy-item">{{ policy }}</li>
            </ul>
          </div>
        </div>
        <div v-if="activeTab === 'tips'">
          <div class="tips-card">
            <h4 class="tips-title">重要提示</h4>
            <ul class="tips-list">
              <li v-for="tip in hospital.tips" :key="tip" class="tips-item">
                <i class="fas fa-info-circle"></i> {{ tip }}
              </li>
            </ul>
          </div>
        </div>
        <div v-if="activeTab === 'map'">
          <div class="map-card">
            <div v-if="weather" class="weather-info">
              <i class="fas fa-cloud-sun"></i>
              {{ weather.weather }} {{ weather.temperature }}℃，风力{{ weather.windpower }}级，湿度{{ weather.humidity }}%
            </div>
            <div class="map-header">
              <i class="fas fa-map-marked-alt"></i> 医院位置与导航
            </div>
            <div class="map-area">
              <div id="amapContainer" class="hospital-map"></div>
            </div>
            <div class="map-actions">
              <button class="map-btn"><i class="fas fa-route"></i> 路线导航</button>
              <button class="map-btn"><i class="fas fa-walking"></i> 步行导航</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容已移除 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      hospital: {
        name: "安心医疗",
        address: "北京市东城区帅府园1号",
        phone: "010-69151188",
        rating: 4.9,
        level: "三级甲等",
        tags: ["综合医院", "医保定点", "无假日医院"],
        location: { lat: 39.917, lng: 116.417 },
        policy: [
          "初诊患者需持有效身份证件办理就医卡",
          "门诊实行全预约制，请提前1-7天预约",
          "就诊前需完成流行病学调查问卷",
          "医保患者需携带社保卡进行结算",
          "分时段就诊，建议按预约时间提前30分钟到达",
        ],
        guide: [
          {
            step: 1,
            title: "预约挂号",
            content:
              "通过医院APP、微信公众号或电话114预约挂号，预约成功后会收到短信确认通知。普通门诊提前1-7天预约，专家门诊提前14天开放预约。",
          },
          {
            step: 2,
            title: "初诊登记",
            content:
              "初诊患者持本人身份证件到门诊大厅1号窗口办理就医卡，已预约挂号的患者可直接在自助取号机凭身份证或就诊卡取号。",
          },
          {
            step: 3,
            title: "分诊报到",
            content:
              "凭挂号单到相应诊区的分诊台刷卡报到候诊，电子屏幕上会显示排队顺序。请保持候诊区域安静。",
          },
          {
            step: 4,
            title: "医生就诊",
            content:
              "叫号后进入诊室就诊，请详细准确描述症状，配合医生问诊检查。问诊过程中请勿录音录像。",
          },
          {
            step: 5,
            title: "缴费取药",
            content:
              "医生开出处方后，可通过手机支付或到收费窗口缴费，持缴费凭证到药房排队取药。",
          },
          {
            step: 6,
            title: "检查治疗",
            content:
              "需要检查或治疗的患者凭导诊单到相应科室，按序进行检查。部分检验需空腹准备。",
          },
        ],
        tips: [
          "请务必在预约时间段前30分钟报到，迟到可能导致号源作废",
          "急症患者请直接到急诊科就诊",
          "院内提供免费轮椅和导医服务",
        ],
      },
      activeTab: "guide",
      weather: null,
    };
  },
  watch: {
    activeTab(newVal) {
      if (newVal === 'map') {
        this.$nextTick(() => {
          if (!window.AMap) {
            const script = document.createElement('script');
            script.src = 'https://webapi.amap.com/maps?v=2.0&key=3633f28409f6aed656d4c98362308984';
            script.onload = this.initAMap;
            document.body.appendChild(script);
          } else {
            this.initAMap();
          }
          this.fetchWeather();
        });
      }
    }
  },
  methods: {
    initAMap() {
      if (!document.getElementById('amapContainer')) return;
      if (this._amap) {
        this._amap.destroy();
        this._amap = null;
      }
      this._amap = new window.AMap.Map('amapContainer', {
        center: [104.401795, 31.57955],
        zoom: 16,
      });
      new window.AMap.Marker({
        position: [104.401795, 31.57955],
        map: this._amap,
        title: '安心医疗',
        label: {
          content: '<div style="color:#1976d2;font-weight:bold;font-size:16px;">安心医疗</div>',
          offset: new window.AMap.Pixel(-40, -40)
        }
      });
    },
    fetchWeather() {
      const adcode = '510726';
      const key = '3633f28409f6aed656d4c98362308984';
      fetch(`https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=${key}&extensions=base`)
        .then(res => res.json())
        .then(data => {
          if (data.status === '1' && data.lives && data.lives.length > 0) {
            this.weather = data.lives[0];
          } else {
            this.weather = null;
          }
        });
    },
  },
};
</script>

<style scoped>
.guide-main {
  display: flex;
  gap: 40px;
  max-width: 1300px;
  margin: 60px auto 100px;
  padding: 0 4%;
}

.guide-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hospital-header {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(13,110,253,0.07);
  padding: 28px 32px;
}

.hospital-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4fc3f7 0%, #1976d2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 2px 8px rgba(33,150,243,0.12);
}

.hospital-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 6px;
}

.hospital-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.info-tag {
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 8px;
  padding: 2px 12px;
  font-size: 0.95rem;
  font-weight: 500;
}

.hospital-contact {
  font-size: 1rem;
  color: var(--text-medium);
  display: flex;
  gap: 18px;
  margin-top: 4px;
}

.guide-tabs {
  display: flex;
  gap: 10px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(13,110,253,0.06);
  padding: 8px 18px;
  align-items: center;
  width: 520px;
  min-width: 320px;
  justify-content: space-between;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.tab-btn {
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-medium);
  transition: all 0.2s;
}
.tab-btn.active {
  background: linear-gradient(90deg, #42a5f5 0%, #1976d2 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(33,150,243,0.10);
}

.guide-tab-content {
  margin-top: 18px;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.step-card {
  background: #f5fafd;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.06);
  padding: 22px 28px;
  border-left: 5px solid #1976d2;
  transition: box-shadow 0.2s;
}
.step-card:hover {
  box-shadow: 0 6px 18px rgba(33,150,243,0.13);
}
.step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.step-number {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(33,150,243,0.10);
}
.step-title {
  font-size: 1.15rem;
  color: var(--text-dark);
  font-weight: 600;
}
.step-content {
  color: var(--text-medium);
  line-height: 1.8;
  padding-left: 54px;
  margin-top: -18px;
}
.policy-card, .tips-card {
  background: #f5fafd;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.06);
  padding: 22px 28px;
  margin-top: 10px;
}
.policy-title, .tips-title {
  font-size: 1.15rem;
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 12px;
}
.policy-list, .tips-list {
  list-style-type: none;
  padding: 0;
}
.policy-item, .tips-item {
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--text-medium);
  transition: color 0.2s;
}
.policy-item::before {
  content: "•";
  color: #42a5f5;
  font-size: 1.3rem;
  position: absolute;
  left: 0;
  top: 2px;
}
.tips-item i {
  color: #ff9800;
  position: absolute;
  left: 0;
  top: 12px;
}
.tips-item:hover {
  color: #ff9800;
}

.guide-right {
  width: 420px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}

.map-card {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(13,110,253,0.07);
  padding: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.map-header {
  background: linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%);
  padding: 22px 32px;
  font-weight: 600;
  color: #1976d2;
  font-size: 1.1rem;
  border-radius: 18px 18px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-area {
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5fafd;
  border-radius: 0 0 0 0;
  overflow: hidden;
}
.hospital-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 0 0;
  min-height: 180px;
}
.map-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 22px;
}
.map-btn {
  padding: 12px 28px;
  background: linear-gradient(90deg, #42a5f5 0%, #1976d2 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(33,150,243,0.10);
  transition: background 0.2s, transform 0.2s;
}
.map-btn:hover {
  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
  transform: translateY(-2px);
}

.weather-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1976d2;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 8px;
  margin-left: 8px;
}

@media (max-width: 1100px) {
  .guide-main {
    flex-direction: column;
    gap: 30px;
    padding: 0 2%;
  }
  .guide-right {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 700px) {
  .guide-main {
    padding: 0 0.5%;
    margin: 30px auto 40px;
  }
  .hospital-header, .map-card {
    padding: 16px 8px;
  }
  .map-area {
    height: 180px;
  }
}
</style>